<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
			<swiper-item v-for="(item,index) in goodsDetail.pics" :key="item.pics_id">
				<view class="swiper-item">
					<image :src="item.pics_sma_url" mode="widthFix" style="width: 100%;" @click="getBig(index)"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="goods_info">
			<view class="">￥{{goodsDetail.goods_price}}</view>
			<view class="">{{goodsDetail.goods_name}}</view>
			<uni-icons type="star" size="17"></uni-icons>
			<rich-text :nodes="goodsDetail.goods_introduce"></rich-text>
		</view>
		<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
			@buttonClick="buttonClick" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				goodsDetail: {},
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: undefined
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				customButtonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
						color: '#fff'
					}
				],
				customButtonGroup1: [{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}]
			}
		},
		computed: {
			...mapState('cart', ['cartList'])
		},
		watch: {
			cartList: {
				immediate: true,
				handler(newVal) {
					this.options[2].info = newVal.length
				}
			}
		},
		methods: {
			buttonClick(e) {
				if (e.content.text == '加入购物车') {
					this.$store.commit('cart/getCariList', this.goodsDetail)
				}
			},
			onClick(e) {
				if (e.content.text == '购物车') {
					uni.switchTab({
						url: '/pages/cart/cart'
					})
				}
			},
			getBig(index) {
				uni.previewImage({
					current: index,
					urls: this.goodsDetail.pics.map(item => item.pics_big)
				})
			},
			async getGoodsDetail(id) {
				let {
					data
				} = await uni.$http.get('/api/public/v1/goods/detail', {
					goods_id: id
				})
				this.goodsDetail = data.message
				console.log(this.goodsDetail);
			}
		},
		onLoad(op) {
			let id = op.goods_id || op.cid
			this.getGoodsDetail(id)
		}
	}
</script>

<style lang="scss">
	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}

	.uni-goods-nav {
		position: sticky;
		bottom: 0;
	}
</style>